<template>
  <nav class="nav-bar">
    <div class="logo-info">
      <img style="width: 50px" src="https://document-yd.oss-cn-beijing.aliyuncs.com/icon/logo.png" class="avatar" />
      <span class="logoName">秒映</span>
    </div>
    <router-link @click="handleGo(item.id)" v-for="item in navItems" :to="item.path" class="nav-item"
      active-class="active">
      <span class="icon">
        <svg v-if="item.id == 1" t="1743175101297" class="icon" viewBox="0 0 1221 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="12344" width="200" height="200">
          <path
            d="M1204.814491 122.670376l-104.202498-9.819364a18.026592 18.026592 0 0 1-14.655767-11.138382L1048.290907 11.139994a17.880035 17.880035 0 0 0-33.122032 0l-37.079088 90.572636a17.586919 17.586919 0 0 1-14.655767 11.138382l-104.349055 9.819364a18.026592 18.026592 0 0 0-10.11247901 31.363339l78.554907 69.028659a17.733477 17.733477 0 0 1 5.71574901 17.58692L908.91457 337.084236a18.026592 18.026592 0 0 0 26.67349501 19.638727l86.90869299-51.002067a17.586919 17.586919 0 0 1 18.173151 0L1128.751064 357.162636A18.026592 18.026592 0 0 0 1154.69177 337.084236l-23.302668-96.874615a17.733477 17.733477 0 0 1 5.715749-17.58692l78.554907-69.028659a18.319708 18.319708 0 0 0-10.845267-31.363339z"
            fill="#ffffff" p-id="12345"></path>
          <path
            d="M928.699854 224.674509l4.250173-17.147247a18.026592 18.026592 0 0 0-5.715749-17.000689l-74.451293-66.097505a18.026592 18.026592 0 0 0-4.103614 29.311532l78.554907 69.028659a14.655766 14.655766 0 0 1 1.465576 1.90525zM1211.263028 124.575625L1137.104851 190.526573a18.026592 18.026592 0 0 0-5.715749 17.733478l4.103614 17.293804 1.612135-1.758692 78.554907-69.028659a18.319708 18.319708 0 0 0-4.39673-30.190879zM1150.588155 320.376662a17.880035 17.880035 0 0 1-22.56988 3.663942L1040.816466 272.89198a18.319708 18.319708 0 0 0-18.17315 0l-86.908694 51.148624a17.733477 17.733477 0 0 1-22.423322-3.810499L908.91457 337.084236a18.026592 18.026592 0 0 0 26.673495 19.638727l86.908693-51.002067a17.586919 17.586919 0 0 1 18.173151 0L1128.751064 357.162636A18.026592 18.026592 0 0 0 1154.69177 337.084236z"
            fill="#ffffff" p-id="12346"></path>
          <path
            d="M741.82895911 787.73903785a42.501722 42.501722 0 0 0 34.09490072-69.53701592L620.06145625 530.00646075a42.208607 42.208607 0 0 1-6.4251788-42.90361415l87.87986575-210.58005518a41.622376 41.622376 0 0 0-54.61402016-54.61402015l-210.37279157 88.08712935a41.182703 41.182703 0 0 1-42.79998199-6.32154665L205.5337883 148.01921471a41.915491 41.915491 0 0 0-68.50069719 35.13121944l15.44115583 243.43137357a42.062049 42.062049 0 0 1-19.69006432 38.5510728L-65.25641072 585.24227242a42.062049 42.062049 0 0 0 11.29587881 76.37672264l213.99990853 55.44307528c90.26339967 10.46682368 137.6231859-39.38012863 144.46289262-64.251788 7.56513039-28.29151344 1.34721519-49.84695231-18.44648128-56.16849967s-26.84066679-0.93268728-26.84066679-0.93268728a34.734166 34.734166 0 1 1-18.44648127 66.9462184s-46.21983464-10.77771944-31.50410249-63.83726009 72.12781415-45.80530743 82.9055336-42.69635054a83.537868 83.537868 0 0 1 52.02322262 107.77719367c-15.02662792 54.40675655-68.29343359 91.50698271-137.83045021 97.62126575l56.37576327 216.79797108a41.915491 41.915491 0 0 0 76.37672263 11.2958788l121.04207919-197.93696189a41.915491 41.915491 0 0 1 38.44744135-19.79369577z"
            fill="#ffffff" p-id="12347"></path>
          <path
            d="M152.68151054 437.77405436l21.24454312-13.78304488a41.768934 41.768934 0 0 0 19.58643287-38.44744135L178.17496214 142.83761895A8.295164 8.295164 0 0 1 178.17496285 138.0705504 42.355164 42.355164 0 0 0 137.55125118 183.46132991l15.44115512 243.43137286a43.967299 43.967299 0 0 1-0.31089576 10.88135159zM785.45799552 747.01169473l-3.00532545 0.10363215-243.5350043-15.54478799a41.768934 41.768934 0 0 0-38.3438099 19.69006432l-13.16125336 21.65907032a42.64828 42.64828 0 0 1 10.98498374-0.82905512l243.53500431 15.54478799a42.355164 42.355164 0 0 0 43.52540496-40.62371167zM243.35943813 708.35698977a41.622376 41.622376 0 0 0-29.22420071-28.18788199l-227.57568982-59.07019224a41.622376 41.622376 0 0 1-30.26051944-48.91426503l-21.55543888 13.05762191a42.062049 42.062049 0 0 0 11.29587881 76.37672264l213.99990853 55.44307528a173.524272 173.524272 0 0 0 83.32006151-8.70508057zM339.11532932 989.61401246l13.05762121-21.34817527a41.622376 41.622376 0 0 1-48.91426433-30.46778305l-48.39610566-186.43381878a203.275478 203.275478 0 0 1-48.49973712 10.15592722l56.37576327 216.79797108a41.915491 41.915491 0 0 0 76.37672263 11.2958788z"
            fill="#ffffff" p-id="12348"></path>
        </svg>
        <svg v-if="item.id == 2" t="1743175320278" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="18877" width="200" height="200">
          <path
            d="M677.2 599.2c69.4-54.7 113.9-139 113.9-233.7 0.1-164.8-134.7-298.4-301-298.4s-301 133.6-301 298.4c0 90.1 40.3 170.8 103.9 225.6C190.8 661.8 128 786 128 919.6c0 11.8 9.5 21.3 21.3 21.3 11.7 0 21.3-9.5 21.4-21.3 0-124.8 60.8-240.3 158.7-301.4 0.1-0.1 0.2-0.1 0.3-0.2 46.4 29.1 101.5 45.9 160.4 45.9 54.4 0 105.3-14.3 149.4-39.3 22.8 15.5 43.8 34.2 62.4 55.8 4.2 4.9 10.1 7.4 16.1 7.4 4.9 0 9.9-1.7 14-5.2 8.9-7.7 9.9-21.2 2.2-30.1C716.9 632.5 697.8 614.7 677.2 599.2zM231.7 365.5c0-141 115.9-255.8 258.4-255.8s258.4 114.7 258.4 255.8S632.6 621.3 490.1 621.3 231.7 506.5 231.7 365.5z"
            p-id="18878" fill="#ffffff"></path>
          <path
            d="M490.1 531.1c-67.1 0-121.7-46.3-121.7-103.3 0-11.8 9.5-21.3 21.3-21.3S411 416 411 427.8c0 33.4 35.5 60.7 79.1 60.7s79.1-27.2 79.1-60.7c0-11.8 9.5-21.3 21.3-21.3s21.3 9.5 21.3 21.3C611.8 484.8 557.2 531.1 490.1 531.1z"
            p-id="18879" fill="#ffffff"></path>
          <path d="M745.9 663.9 767.2 770.4 426.2 770.4 447.5 813.1 895.1 813.1Z" p-id="18880" fill="#ffffff"></path>
          <path d="M873.7 898.3 852.4 855.7 404.9 855.7 554 1004.9 532.7 898.3Z" p-id="18881" fill="#ffffff"></path>
        </svg>
        <svg v-if="item.id == 3" t="1743175596657" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="28855" width="200" height="200">
          <path
            d="M383.8 464.3c70.1 0 126.7-55.6 126.7-124.2v-41.4c0-68.5-56.8-124.2-126.7-124.2-70.1 0-126.7 55.6-126.7 124.2v41.4c-0.2 68.6 56.6 124.2 126.7 124.2z m316.9 0.2c55.2 0 99.8-45.2 99.8-101v-33.7c0-55.8-44.7-101-99.8-101-55.1 0-99.8 45.2-99.8 101v33.7c-0.1 55.8 44.7 101 99.8 101z m161.6 84c-47.4-19.3-98.8-29.8-152.5-29.8-25.2 0-49.9 2.5-73.8 7 3.8 1.3 7.5 2.5 11.2 3.9 47.6 20.7 80.8 67 80.8 121.2v84.8c49.2-1.3 97.2-7.6 143.5-18.8 21.7-6.9 37.6-28.1 37.6-53.4V625c-0.1-34.3-19.4-63.5-46.8-76.5z m-270.7 27.9C527 550.8 457 536.7 383.8 536.7c-73.1 0-143.1 14.1-207.6 39.6-37.7 17.3-64.2 56.4-64.2 102.2v51c0 33.8 21.5 62.1 51 71.3 71 16.7 144.8 25.9 220.7 25.9 75.7 0 149.5-9 220.4-25.8 29.6-9.1 51.3-37.5 51.3-71.4v-51c0-45.7-26.3-84.6-63.8-102.1z"
            fill="#ffffff" p-id="28856"></path>
        </svg>
        <svg v-if="item.id == 4" style="width: 20px;height: 20px" t="1743311580391" class="icon" viewBox="0 0 1028 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8780" width="200" height="200">
          <path
            d="M232.727273 256c0 139.636364 125.672727 256 279.272727 256s279.272727-116.363636 279.272727-256S665.6 0 512 0 232.727273 116.363636 232.727273 256zM0 875.054545c0 139.636364 158.254545 148.945455 377.018182 148.945455h260.654545c218.763636 0 390.981818-9.309091 390.981818-148.945455 0-162.909091-232.727273-316.509091-512-316.50909C232.727273 558.545455 0 712.145455 0 875.054545z"
            fill="#ffffff" p-id="8781"></path>
          <path
            d="M232.727273 256c0 139.636364 125.672727 256 279.272727 256s279.272727-116.363636 279.272727-256S665.6 0 512 0 232.727273 116.363636 232.727273 256zM0 875.054545c0 139.636364 158.254545 148.945455 377.018182 148.945455h260.654545c218.763636 0 390.981818-9.309091 390.981818-148.945455 0-162.909091-232.727273-316.509091-512-316.50909C232.727273 558.545455 0 712.145455 0 875.054545z"
            fill="#ffffff" p-id="8782"></path>
        </svg>
        <svg v-if="item.id == 5" t="1743175750189" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="31596" width="200" height="200">
          <path
            d="M286.1 414.1h0.2-0.2M120.3 453.6h0.3-0.3M909.8 752.5l-0.2-0.4-95.8-126.5V472.4c0-87.6-29.4-160.1-87.3-215.6-46.9-44.9-101.9-67.6-132-77.4v-32.8c0-45.5-37.1-82.6-82.6-82.6-45.6 0-82.6 37.1-82.6 82.6v32.8c-30.1 9.8-85.1 32.4-132 77.4-57.9 55.5-87.3 128-87.3 215.6v153.1l-92.6 121-3.2 5.5-0.2 0.4c-1.2 3.1-11.6 30.6 6.5 57.7 19.1 28.5 59.4 42.4 123.1 42.4h115.8c8 31.2 26.1 57.8 52.6 77 27.4 19.9 62 30.4 99.9 30.4 37.9 0 72.4-10.5 99.9-30.4 26.4-19.2 44.6-45.7 52.6-76.9h115.8c63.7 0 104-13.9 123.1-42.4 18.3-27.3 7.8-54.6 6.5-57.7zM575 891.4c-17.4 10.7-39.2 16.4-63 16.4s-45.5-5.7-63-16.4c-15.5-9.5-27.3-22.9-34.3-38.8h194.6c-7 15.9-18.8 29.3-34.3 38.8z m-93.4-744.8c0-16.8 13.6-30.4 30.4-30.4 16.8 0 30.4 13.6 30.4 30.4v25l-60.8-0.2v-24.8z m-16.8 76.9h94.4c10.6 2.2 61.5 14.3 109.3 50.7 27.4 20.9 49.1 46.1 64.5 75 19 35.5 28.6 77 28.6 123.1v170.8L861.7 774c0.2 2.6-0.5 5.2-2 7.4-12.6 17.6-64 18.9-79.5 18.9H243.7c-61.2 0-76.3-14.5-79.5-18.9-1.5-2.1-2.2-4.7-2-7.3l99.4-130 0.7-0.9V472.4c0-199.6 180.1-244.1 202.5-248.9z"
            fill="#ffffff" p-id="31597"></path>
        </svg>
        <svg t="1743177270080" v-if="item.id == 6" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="34452" width="200" height="200">
          <path
            d="M638.24 959.78c-20.29 0-40.18-7.11-56.23-20.57L453.84 831.47 316.06 941.39c-13.51 10.8-32.05 12.81-47.55 5.25-15.52-7.59-25.32-23.41-25.14-40.71l2.51-244.39L127.07 556.8c-21.69-18.21-33.16-46.92-29.91-76.1 3.26-29.21 20.79-54.65 46.89-68.12L800.74 74.06c31.13-16.05 67.38-12.25 94.53 9.84 27.17 22.12 38.21 56.84 28.81 90.59L722.76 895.7c-8.05 28.81-29.93 51.29-58.5 60.12-8.57 2.65-17.34 3.96-26.02 3.96zM454.58 728.83c10.25 0 20.48 3.5 28.81 10.49L637.33 868.7l198.79-712.13-648.47 334.27 132.81 117.07c9.77 8.59 15.3 21.03 15.17 34.04l-1.75 170.68 92.78-74.02a44.674 44.674 0 0 1 27.92-9.78z"
            fill="#ffffff" p-id="34453"></path>
          <path
            d="M460.42 594.64c-11.46 0-22.91-4.37-31.66-13.12-17.49-17.49-17.49-45.84 0-63.31l167.53-167.48c17.49-17.49 45.82-17.49 63.31 0s17.49 45.84 0 63.31L492.07 581.52c-8.74 8.75-20.2 13.12-31.65 13.12z"
            fill="#ffffff" p-id="34454"></path>
        </svg>

        <svg v-if="item.id == 7" t="1743178221644" style="width: 20px;height: 20px;margin-right: 0px" class="icon"
          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46232" width="200"
          height="200">
          <path
            d="M576 85.333333c0 18.944-8.234667 35.968-21.333333 47.701334V213.333333h213.333333a128 128 0 0 1 128 128v426.666667a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V341.333333a128 128 0 0 1 128-128h213.333333V133.034667A64 64 0 1 1 576 85.333333zM0 426.666667h85.333333v256H0v-256z m1024 0h-85.333333v256h85.333333v-256zM384 618.666667a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m320-64a64 64 0 1 0-128 0 64 64 0 0 0 128 0z"
            fill="#ffffff" p-id="46233"></path>
        </svg>


      </span>
      <span class="label">{{ item.label }}</span>
    </router-link>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from "@/stores/modules/user";
import { useLoginDialogStore } from '@/stores/modules/loginDialog.js'
const loginDialogStore = useLoginDialogStore();
const router = useRouter();
const userStore = useUserStore();

const navItems = ref([
  { id: 1, isActive: true, path: '/', icon: '🏠', label: '推荐' },
  { id: 2, isActive: false, path: '/guanzhu?type=2', icon: '🔍', label: '关注' },
  // { id: 3, isActive: false, path: '/friend?type=3', icon: '🔍', label: '朋友' },
  { id: 4, isActive: false, path: '/profile', icon: '➕', label: '我的' },
  { id: 5, isActive: false, path: '/messages', icon: '💬', label: '消息' },
  { id: 6, isActive: false, path: '/create', icon: '💬', label: '投稿' },
  { id: 7, isActive: false, path: '/ai', icon: '👤', label: 'Koala' }
]);

// 点击菜单跳转时
const handleGo = (id) => {
  if (id != 1 && !userStore.token) {
    loginDialogStore.isShow = true
  }
  navItems.value.forEach(item1 => item1.isActive = item1.id == id)
}
</script>

<style scoped>
.icon {
  width: 23px;
  height: 23px;
}

@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/ixfouQjUXvCe/VcRXVZitnVmK.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/ixfouQjUXvCe/uLw83naOEy9a.woff") format("woff");
  font-display: swap;
}

.logo-info {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-weight: bolder;
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
}

.logoName {
  font-size: 20px;
  color: white;
}

.nav-bar {
  top: 0;
  left: 0;
  bottom: 0;
  width: 10vw;
  background: transparent;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 20px 0;

}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  margin: 8px 0;
  transition: all 0.3s ease;
  color: #c0c0d6;
  text-decoration: none;
  border-left: 3px solid transparent;
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
}

.nav-item * {
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.nav-item.active .icon {
  font-size: 20px;
}

.icon {
  font-size: 20px;
  margin-right: 12px;
}

.label {
  font-size: 14px;
  font-weight: 500;
  font-family: '阿里妈妈数黑体 Bold', sans-serif;
}

.publish-btn {
  margin-top: 20px;
  background: #7367f0;
  color: white !important;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.3);
}

.publish-btn.active {
  transform: none;
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.5);
}

.publish-btn {
  margin-top: 20px;
  background: #7367f0;
  color: white !important;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(115, 103, 240, 0.3);
}

.publish-btn.active {
  transform: none;
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.5);
}
</style>
